<template>
  <div class="container">
    <el-row>
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item
          label="问卷名称："
          prop="name"
          :rules="[{ required: true, message: '问卷名称不能为空' }]"
        >
          <el-input
            style="width: 400px"
            v-model="form.name"
            placeholder="请输入问卷名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="题目列表:"
          prop="tmList"
          :rules="[{ required: true, message: '题目列表不能为空' }]"
        >
          <Table
            :multiSelection="true"
            :columnProps="columnProps"
            :tableData="tableData"
            :showHandle="false"
            :showDetailBtn="true"
            :pagination="pagination"
            @currentPage="goCurrent"
            @selectionChange="handleSelectionChange"
            @sizeChange="sizeChange"
          >
          </Table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()" :loading="loading"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import Table from "@/components/Table";
import { Message } from "element-ui";
import { wjAdd, wjEdit,wjDetail } from "@/api/wj";
import { tmList } from "@/api/subject";
import { pagination, page } from "@/utils/enumConfig";
import { param } from "@/utils";

const tmTypeEnum = {
  fill: "填空题",
  single: "单选题",
  multi: "多选题",
};
export default {
  name: "wjAdd",
  components: {
    Table,
  },
  data() {
    const columnProps = [
      {
        title: "题目名称",
        dataIndex: "name",
        key: "name",
      },
      {
        title: "题目类型",
        dataIndex: "type",
        key: "type",
        render: (record) => {
          return `<span>${tmTypeEnum[record.type] || "-"}</span>`;
        },
      },
      {
        title: "创建时间",
        dataIndex: "createTime",
        key: "createTime",
        width: 200,
      },
    ];
    return {
      loading: false,
      list: [],
      tableData: [],
      pagination: this.$_.cloneDeep(pagination),
      form: {
        name: "",
        type: "fill",
        tmList: [],
        status: 1,
      },
      subForm: {},
      myFileList: [],
      id: "",
      columnProps,
    };
  },
  async created() {
    let { pageIndex, pageSize } = this.pagination;

    let param = {
      current: pageIndex,
      size: pageSize,
    };
    this.getTmList(param);
  },
  async mounted() {
    let { id } = this.$route.params;
    if (id) {
      this.id = id;
      let _this = this;
      let data = await wjDetail({ id });
      Object.keys(_this.form).forEach((key) => {
        _this["form"][key] = data[key];
      });
    }
  },
  methods: {
    async getTmList(param) {
      let { records, size, total, current } = await tmList(param),
        page = this.pagination;
      this.pagination = {
        ...page,
        totalElements: total,
        pageIndex: current,
      };
      console.log("records", records);
      this.tableData = records;
    },
    //分页跳转
    goCurrent(currentIndex) {
      let { pageSize, pageIndex } = this.pagination;
      let param = {
        ...this.filterParam,
        current: currentIndex,
        size: pageSize
      };
      this.tmList(param);
    },
    onSubmit() {
      const { validate } = this.$refs["form"];
      validate((valid) => {
        if (valid) {
          this._submitData(this.form);
        }
      });
    },
    sizeChange(size) {
      let param = {
        ...this.filterParam,
        current: 1,
        size
      };
      this.$set(this.pagination, "pageSize", size);
      this.tmList(param);
    },
    async _submitData(params) {
      this.loading = true;
      if (params.sort) params["sort"] = parseInt(param.sort);
      let res = !this.id ? await wjAdd(params) : await wjEdit({id:this.id,...params});
      this.loading = false;
      if (res && res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000,
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
    //选择题目列表
    handleSelectionChange(rows) {
      this['form']['tmList'] = rows;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .radio-form {
    ::v-deep .el-form-item__error {
      left: 5%;
    }
  }
  .item-tmxx {
    margin: 20px 0;
  }
  .minus {
    margin-left: 10px;
  }
}
</style>
